<template>
  <el-dialog :title="$t('personal.updateTag.title')" :visible.sync="showUpdateDialog" width="400px" @close="reset">
    <div class="base-modal-content">
      <!-- 内容主体区域 -->
      <biz-team-select :value="tags" multiple @input="update" :fetch-func="fetchTeam"/>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showUpdateDialog = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="save" :disabled="pending">{{ $t('common.base.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { t } from '@src/locales'

export default {
  name: 'update-tag',
  data() {
    return {
      pending: false,
      showUpdateDialog: false,
      tags: [],
      userId: '',
    }
  }, 
  computed: {
    tagIds() {
      return this.tags.map(item=>item.id); 
    }
  },
  methods: {
    fetchTeam(params = {}){
      params.source = 'userInfo'
      params.type = ''
      params.userId = this.userId
      return this.$http.post('/security/tag/tree', {...params})
    },
    openDialog(tags, userId) {
      this.userId = userId;
      this.tags = tags;
      this.showUpdateDialog = true;
    },
    async update(value){
      this.tags = value
    },
    async save(){
      try {
        if(!this.tagIds.length) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: t('common.validate.requiredDepartment'),
          type: 'error'
        })
        this.pending = true
        let tags = []
        this.tagIds.forEach(item=>{
          const tag = {};
          tag.tagId = item;
          tag.userId = this.userId;
          tags.push(tag);
        })
        const { status, message } = await this.$http.post(`/security/user/setUserTag?userId=${this.userId}`, tags, true)
        this.pending = false;
        if (status !== 0) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: message || '',
          type: 'error'
        })
        this.$platform.notification({
          title: t('common.base.tip.modifySuccess'),
          type: 'success'
        })
        this.$emit('update')
        this.showUpdateDialog = false
      } catch (e) {
        console.error(e)
        this.pending = false
      }
    },
    reset(){
      this.roleIds = []
      this.showUpdateDialog = false
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
  top: 0!important;
}
.el-dialog__body {
  .el-select {
    width: 100%;
  }
}
</style>